import Point from 'ol/geom/Point';
import { fromLonLat, transform } from 'ol/proj';
import Overlay from 'ol/Overlay';
import { chartConfig } from "@/page/chart/options";
import { dateFormat } from "@/utils/date"
import * as turf from '@turf/turf'
import { getStore } from "@/utils/store";
import { getMeteoByLonLat } from "@/api/weather"
import { transfLonAndLat, findStrength } from "@/utils/chart"

const pointLonToXy = (x, y) => {
  return new Point(fromLonLat([x, y]));
}

const pointLonLat = (x, y) => {
  return new Point([x, y]);
}

// 当前坐标系转经纬度
const transformNowToLonlat = (list) => {
  return transform(list, chartConfig.EPSGCode, 'EPSG:4326');
}

/**
 * 经纬度转当前坐标系
 * @param {*} list [lon, lat]
 * @returns
 */
const transformLonlatToNow = (list) => {
  return transform(list, 'EPSG:4326', chartConfig.EPSGCode);
}

// to自己
const transformToMe = (list) => {
  return list
}

// 根据传入id删除海图中所有dom元素
const removeDomById = (id) => {
  var element = document.getElementById(id);
  if (element) element.parentNode.removeChild(element);
}

/**
 * 海图线处理
 * 将经过180度分割线的数据进行转换
 * @param [[lon, lat], [lon, lat]] list
 * 第一位是经度，第三位是坐标经度
 * @return [[lon, lat], [lon, lat]] 坐标点
 */
function transformLineForPoint(list, fn = transformToMe) {
  const length = list.length;
  let newList = []
  list[0].push(list[0][0])
  newList.push(fn([list[0][2], list[0][1]]))
  for (let index = 1; index < length; ++index) {
    const before = list[index - 1]
    const now = list[index]
    // 首先判断是否在同一面内
    const c = parseFloat(before[0]) - parseFloat(now[0])
    if (Math.abs(c) <= 180) {
      // c小于0，即向东
      let d = parseFloat(before[2]) - c
      list[index].push(d)
    } else {
      // c大于0，即向东
      let d = 0;
      if (c >= 0) {
        d = (360 + parseFloat(now[0]) - parseFloat(before[0])) + parseFloat(before[2])
      } else {
        d = parseFloat(before[2]) - (360 + parseFloat(before[0]) - parseFloat(now[0]))
      }
      list[index].push(d)
    }
    newList.push(fn([list[index][2], list[index][1]]))
  }
  return newList
}

/**
* 根据一个经纬度及距离角度，算出另外一个经纬度
* @param {*} lon 经度
* @param {*} lat 纬度
* @param {*} brng 方位角 ---- 正北方：000°或360° 正东方：090° 正南方：180° 正西方：270°
* @param {*} dist 90000距离(米)
*/
var mapNumberUtil = {
  rad: function rad(d) {
    return d * Math.PI / 180.0;
  },
  deg: function deg(d) {
    return d * 180 / Math.PI
  }
};
function getLonAndLat(lon, lat, brng, dist) {
  //大地坐标系资料WGS-84
  var a = 6378137; // 极坐标长半径
  var b = 6356752.3142; // 极坐标短半径
  var f = 1 / 298.257223563; // 扁率
  var lon1 = lon * 1;
  var lat1 = lat * 1;
  var s = dist;
  var alpha1 = mapNumberUtil.rad(brng);
  var sinAlpha1 = Math.sin(alpha1);
  var cosAlpha1 = Math.cos(alpha1);
  var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1));
  var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)),
    sinU1 = tanU1 * cosU1;
  var sigma1 = Math.atan2(tanU1, cosAlpha1);
  var sinAlpha = cosU1 * sinAlpha1;
  var cosSqAlpha = 1 - sinAlpha * sinAlpha;
  var uSq = cosSqAlpha * (a * a - b * b) / (b * b);
  var A = 1 + uSq / 16384 * (4096 + uSq * (- 768 + uSq * (320 - 175 * uSq)));
  var B = uSq / 1024 * (256 + uSq * (- 128 + uSq * (74 - 47 * uSq)));
  var sigma = s / (b * A),
    sigmaP = 2 * Math.PI;
  while (Math.abs(sigma - sigmaP) > 1e-12) {
    var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
    var sinSigma = Math.sin(sigma);
    var cosSigma = Math.cos(sigma);
    var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (- 1 + 2 * cos2SigmaM * cos2SigmaM) - B / 6 * cos2SigmaM * (- 3 + 4 * sinSigma * sinSigma) * (- 3 + 4 * cos2SigmaM * cos2SigmaM)));
    sigmaP = sigma;
    sigma = s / (b * A) + deltaSigma;
  }
  var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
  var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp));
  var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1);
  var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
  var L = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (- 1 + 2 * cos2SigmaM * cos2SigmaM)));
  // var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
  var lonLatObj = {
    lon: lon1 + mapNumberUtil.deg(L),
    lat: mapNumberUtil.deg(lat2)
  }
  return lonLatObj;
}

/**
 * 轮廓计算
 * @params {*}
 * longitude 经度
 * latitude 纬度
 * course 角度
 * width 宽度
 * length 长度
 * leftWidth 左舷宽度
 */
const shipInfo = {
  longitude: 122.21006,
  latitude: 29.99035,
  // longitude: 32.37831086132811,
  // latitude: 30.001413159422814,
  heading: 45,
  width: 23,
  length: 100,
  leftWidth: 20
}
function CalculateContour(row = shipInfo) {
  const scale = {
    topCenter: 0.75,
    middleCenter: 0.69,
    bottomCenter: 0.58,
    centerTop: 0.1,
    centerBottom: 0.25
  }
  const center = {
    lon: row.longitude,
    lat: row.latitude
  }
  row.length = parseInt(row.length)
  row.width = parseInt(row.width)
  row.heading = parseInt(row.heading || "0")
  const TopCenter = getLonAndLat(center.lon, center.lat, row.heading, scale.topCenter * row.length)
  const MiddleCenter = getLonAndLat(center.lon, center.lat, row.heading, scale.middleCenter * row.length)
  const BottomCenter = getLonAndLat(center.lon, center.lat, row.heading, scale.bottomCenter * row.length)
  const CenterBottom = getLonAndLat(center.lon, center.lat, (row.heading + 180) % 360, scale.centerBottom * row.length)
  const MiddleRight = getLonAndLat(MiddleCenter.lon, MiddleCenter.lat, (row.heading + 90) % 360, 0.30 * row.width)
  const MiddleLeft = getLonAndLat(MiddleCenter.lon, MiddleCenter.lat, (row.heading + 270) % 360, 0.30 * row.width)
  const BottomRight = getLonAndLat(BottomCenter.lon, BottomCenter.lat, (row.heading + 90) % 360, 0.5 * row.width)
  const BottomLeft = getLonAndLat(BottomCenter.lon, BottomCenter.lat, (row.heading + 270) % 360, 0.5 * row.width)
  const RightBottom = getLonAndLat(CenterBottom.lon, CenterBottom.lat, (row.heading + 90) % 360, 0.4 * row.width)
  const LeftBottom = getLonAndLat(CenterBottom.lon, CenterBottom.lat, (row.heading + 270) % 360, 0.4 * row.width)
  const RightTop = getLonAndLat(RightBottom.lon, RightBottom.lat, (row.heading + 45) % 360, (0.1 * row.width) * Math.SQRT2)
  const LeftTop = getLonAndLat(LeftBottom.lon, LeftBottom.lat, (row.heading + 315) % 360, (0.1 * row.width) * Math.SQRT2)
  return [
    [TopCenter.lon, TopCenter.lat],
    [MiddleRight.lon, MiddleRight.lat],
    [BottomRight.lon, BottomRight.lat],
    [RightTop.lon, RightTop.lat],
    [RightBottom.lon, RightBottom.lat],
    [LeftBottom.lon, LeftBottom.lat],
    [LeftTop.lon, LeftTop.lat],
    [BottomLeft.lon, BottomLeft.lat],
    [MiddleLeft.lon, MiddleLeft.lat],
    [TopCenter.lon, TopCenter.lat],
  ]
}

/**
 * 真轮廓下选中框计算
 * @param {*} className
 */
function CalculateSelect(row = shipInfo) {
  const toTop = 0.75; // 中心点到船头
  const spaceLength = 20 // 船和框的间隔
  const lineLength = 20 // 线条长度
  const center = {
    lon: row.longitude,
    lat: row.latitude
  }
  row.length = parseInt(row.length)
  row.width = parseInt(row.width)
  row.heading = parseInt(row.heading)
  const topCenter = getLonAndLat(center.lon, center.lat, row.heading, (toTop * row.length) + spaceLength)
  const bottomCenter = getLonAndLat(topCenter.lon, topCenter.lat, (row.heading + 180), row.length + spaceLength * 2)
  // 右上角
  const rightTop = getLonAndLat(topCenter.lon, topCenter.lat, (row.heading + 270) % 360, (row.width / 2) * Math.SQRT2 + 20)
  const rightTop1 = getLonAndLat(rightTop.lon, rightTop.lat, (row.heading + 180) % 360, lineLength)
  const rightTop2 = getLonAndLat(rightTop.lon, rightTop.lat, (row.heading + 90) % 360, lineLength)
  const rightTopList = [
    transformLonlatToNow([rightTop1.lon, rightTop1.lat]),
    transformLonlatToNow([rightTop.lon, rightTop.lat]),
    transformLonlatToNow([rightTop2.lon, rightTop2.lat]),
  ]
  // 左上角
  const leftTop = getLonAndLat(topCenter.lon, topCenter.lat, (row.heading + 90) % 360, (row.width / 2) * Math.SQRT2 + 20)
  const leftTop1 = getLonAndLat(leftTop.lon, leftTop.lat, (row.heading + 270) % 360, lineLength)
  const leftTop2 = getLonAndLat(leftTop.lon, leftTop.lat, (row.heading + 180) % 360, lineLength)
  const leftTopList = [
    transformLonlatToNow([leftTop1.lon, leftTop1.lat]),
    transformLonlatToNow([leftTop.lon, leftTop.lat]),
    transformLonlatToNow([leftTop2.lon, leftTop2.lat]),
  ]
  // 左下角
  const leftBottom = getLonAndLat(bottomCenter.lon, bottomCenter.lat, (row.heading + 90) % 360, (row.width / 2) * Math.SQRT2 + 20)
  const leftBottom1 = getLonAndLat(leftBottom.lon, leftBottom.lat, (row.heading + 0) % 360, lineLength)
  const leftBottom2 = getLonAndLat(leftBottom.lon, leftBottom.lat, (row.heading + 270) % 360, lineLength)
  const leftBottomList = [
    transformLonlatToNow([leftBottom1.lon, leftBottom1.lat]),
    transformLonlatToNow([leftBottom.lon, leftBottom.lat]),
    transformLonlatToNow([leftBottom2.lon, leftBottom2.lat]),
  ]
  // 右下角
  const rightBottom = getLonAndLat(bottomCenter.lon, bottomCenter.lat, (row.heading + 270) % 360, (row.width / 2) * Math.SQRT2 + 20)
  const rightBottom1 = getLonAndLat(rightBottom.lon, rightBottom.lat, (row.heading + 90) % 360, lineLength)
  const rightBottom2 = getLonAndLat(rightBottom.lon, rightBottom.lat, (row.heading + 0) % 360, lineLength)
  const rightBottomList = [
    transformLonlatToNow([rightBottom1.lon, rightBottom1.lat]),
    transformLonlatToNow([rightBottom.lon, rightBottom.lat]),
    transformLonlatToNow([rightBottom2.lon, rightBottom2.lat]),
  ]
  const list = [
    rightTopList,
    leftTopList,
    leftBottomList,
    rightBottomList
  ]
  return list
}

// 根据传入class删除海图中所有dom元素
const removeDomByClassName = (className) => {
  var dom = document.getElementsByClassName(className);
  for (let i = dom.length - 1; i >= 0; --i) {
    if (dom[i] != null) dom[i].parentNode.removeChild(dom[i]);
  }
}

/**
 * 计算夹角
 * @param [B,A,C] list A为顶点坐标
 * @param a,b,c: [lon, lat]
 * @returns
 */
const CalculationAngle = (list) => {
  var point1 = turf.point(list[0]);
  var point2 = turf.point(list[1]);
  var bearing = turf.bearing(point1, point2);
  if (bearing < 0) bearing = 360 + bearing
  return bearing.toFixed(2)
}

/**
 * 移动到指定地点
 * @param row []lon, lat]
 */
const moveToCenterByLonAndLat = (row, map, zoom) => {
  var to = transformLonlatToNow([row[0], row[1]]);
  var view = map.getView();
  // 设置地图等级
  if (zoom) view.setZoom(zoom);
  view.animate({
    center: to,
    duration: 1500
  });
}

/**
 * 计算图形中心点
 * @param list [[lon, lat], ...]
 */
const getCenterPoint = (list) => {
  const data = list.map(m => turf.point([m[0], m[1]]))
  var features = turf.featureCollection(data);
  var center = turf.center(features);
  return center.geometry.coordinates
}

// 共享弹框
const shareInfoTips = (item, coordinate, map, id) => {
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", id)
  const headDom = document.createElement("div");
  headDom.setAttribute("class", "share-info-head")
  const typeDom = document.createElement("div");
  typeDom.setAttribute("class", "share-info-type")
  typeDom.innerHTML = "共享信息";
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "share-info-content")
  // 节点
  const titleDom = document.createElement("div");
  titleDom.setAttribute("class", "share-info-item share-info-title")
  titleDom.innerHTML = item.title;
  const descriptionDom = document.createElement("div");
  descriptionDom.setAttribute("class", "share-info-item")
  descriptionDom.innerHTML = item.description;
  const shipNameDom = document.createElement("div");
  shipNameDom.setAttribute("class", "share-info-item")
  shipNameDom.innerHTML = "共享船只：" + item.shipName;
  const shareTimeDom = document.createElement("div");
  shareTimeDom.setAttribute("class", "share-info-item")
  shareTimeDom.innerHTML = "共享时间：" + dateFormat(new Date(item.shareTime));
  // 插入
  containerDom.appendChild(headDom);
  containerDom.appendChild(contentDom);
  headDom.appendChild(typeDom);
  contentDom.appendChild(titleDom);
  contentDom.appendChild(shipNameDom);
  contentDom.appendChild(shareTimeDom);
  contentDom.appendChild(descriptionDom);
  let share_info_tips = new Overlay({
    element: containerDom,
    offset: [10, 10],
    positioning: 'center',
    insertFirst: false
  });
  share_info_tips.setPosition(coordinate);
  map.addOverlay(share_info_tips);
}

// 通告弹框
const noticeInfoTips = (item, coordinate, map, id) => {
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", id)
  const headDom = document.createElement("div");
  headDom.setAttribute("class", "notice-info-head")
  const TypeDom = document.createElement("div");
  TypeDom.setAttribute("class", "notice-info-title")
  TypeDom.innerHTML = "航海通告";
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "notice-info-content")
  // 节点
  const titleDom = document.createElement("div");
  titleDom.setAttribute("class", "notice-info-item notice-info-title")
  titleDom.innerHTML = item.title;
  contentDom.appendChild(titleDom);
  if (item.beginDate) {
    const beginDateDom = document.createElement("div");
    beginDateDom.setAttribute("class", "notice-info-item")
    beginDateDom.innerHTML = "开始时间：" + dateFormat(new Date(item.beginDate));
    contentDom.appendChild(beginDateDom);
  }
  if (item.endDate) {
    const endDateDom = document.createElement("div");
    endDateDom.setAttribute("class", "notice-info-item")
    endDateDom.innerHTML = "结束时间：" + dateFormat(new Date(item.endDate));
    contentDom.appendChild(endDateDom);
  }
  const descriptionDom = document.createElement("div");
  descriptionDom.setAttribute("class", "notice-info-item")
  descriptionDom.innerHTML = item.content;
  contentDom.appendChild(descriptionDom);
  // 插入
  containerDom.appendChild(headDom);
  containerDom.appendChild(contentDom);
  headDom.appendChild(TypeDom);
  let notice_info_tips = new Overlay({
    element: containerDom,
    offset: [10, 10],
    positioning: 'center',
    insertFirst: false
  });
  notice_info_tips.setPosition(coordinate);
  map.addOverlay(notice_info_tips);
}

/**
 * 绘制台风详情
 *
 */
const typhoonInfoTips = (item, coordinate, map, id) => {
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", id)
  const headDom = document.createElement("div");
  headDom.setAttribute("class", "typhoon-info-head")
  const titleDom = document.createElement("div");
  titleDom.setAttribute("class", "typhoon-info-title")
  titleDom.innerHTML = item.name;
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "typhoon-info-content")
  // 节点
  const typhoonTimeDom = document.createElement("div");
  typhoonTimeDom.setAttribute("class", "typhoon-info-item")
  typhoonTimeDom.innerHTML = "时间：" + dateFormat(new Date(dateFormat(new Date(item.realTime || item.forecastTime)) + ' GMT'));
  const lonDom = document.createElement("div");
  lonDom.setAttribute("class", "typhoon-info-item")
  lonDom.innerHTML = "经度：" + transfLonAndLat(item.lon, "lon", true);
  const latDom = document.createElement("div");
  latDom.setAttribute("class", "typhoon-info-item")
  latDom.innerHTML = "纬度：" + transfLonAndLat(item.lat, "lat", true);
  const maxSPDom = document.createElement("div");
  maxSPDom.setAttribute("class", "typhoon-info-item")
  maxSPDom.innerHTML = "风速：" + item.maxSP + "米/秒";
  const strengthDom = document.createElement("div");
  strengthDom.setAttribute("class", "typhoon-info-item")
  strengthDom.innerHTML = "风力：" + findStrength(item.maxSP) + "级";
  const minPDom = document.createElement("div");
  minPDom.setAttribute("class", "typhoon-info-item")
  minPDom.innerHTML = "气压：" + item.minP + "百帕";
  // 插入
  containerDom.appendChild(headDom);
  containerDom.appendChild(contentDom);
  headDom.appendChild(titleDom);
  contentDom.appendChild(typhoonTimeDom);
  contentDom.appendChild(lonDom);
  contentDom.appendChild(latDom);
  contentDom.appendChild(maxSPDom);
  contentDom.appendChild(strengthDom);
  contentDom.appendChild(minPDom);
  let typhoon_info_tips = new Overlay({
    element: containerDom,
    offset: [10, 10],
    positioning: 'center',
    insertFirst: false
  });
  typhoon_info_tips.setPosition(coordinate);
  map.addOverlay(typhoon_info_tips);
}

/**
 * 显示单点气象信息
 * @param coordinate [lon, lat]
 */
const drawEatherDialog = (map, coordinate, row) => {
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", "meteoInfoId")
  const rightDom = document.createElement("div");
  rightDom.setAttribute("class", "rightRod")
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "meteo-content")
  const meteo_1_dom = document.createElement("div");
  meteo_1_dom.setAttribute("class", "meteo-item")
  meteo_1_dom.innerHTML = `压：${!row.surfPres ? '--' : ((row.surfPres) / 100).toFixed(1)} (hPa)`;
  const meteo_2_dom = document.createElement("div");
  meteo_2_dom.setAttribute("class", "meteo-item")
  meteo_2_dom.innerHTML = `风：${!row.windDir ? '--' : row.windDir.toFixed(1)}° ${!row.windMag ? '--' : row.windMag.toFixed(1)}m/s (${!row.windMag ? '--' : findStrength(row.windMag)}级风)`;
  const meteo_3_dom = document.createElement("div");
  meteo_3_dom.setAttribute("class", "meteo-item")
  meteo_3_dom.innerHTML = `流：${!row.currentDir ? '--' : row.currentDir.toFixed(1)}° ${!row.currentMag ? '--' : row.currentMag.toFixed(1)}m/s`;
  const meteo_4_dom = document.createElement("div");
  meteo_4_dom.setAttribute("class", "meteo-item")
  meteo_4_dom.innerHTML = `浪：${!row.waveHgt ? '--' : row.waveHgt.toFixed(1)}m`;
  const meteo_5_dom = document.createElement("div");
  meteo_5_dom.setAttribute("class", "meteo-item")
  meteo_5_dom.innerHTML = `温：${!row.surfTem ? '--' : row.surfTem.toFixed(1)}℃`;
  contentDom.appendChild(meteo_1_dom);
  contentDom.appendChild(meteo_2_dom);
  contentDom.appendChild(meteo_3_dom);
  contentDom.appendChild(meteo_4_dom);
  contentDom.appendChild(meteo_5_dom);
  const closeDom = document.createElement("i");
  closeDom.setAttribute("class", "el-icon-close")
  closeDom.onclick = () => {
    removeDomById("meteoInfoId")
  }
  // 插入
  containerDom.appendChild(rightDom);
  containerDom.appendChild(contentDom);
  containerDom.appendChild(closeDom);
  let meteo_info_tips = new Overlay({
    element: containerDom,
    offset: [-7, -7],
    positioning: 'center',
    insertFirst: false
  });
  meteo_info_tips.setPosition(coordinate);
  map.addOverlay(meteo_info_tips);
}
const drawWeatherInfo = (map, coordinate) => {
  const lonAndLat = transformNowToLonlat(coordinate)
  removeDomById("meteoInfoId")
  const utcDate = new Date().toUTCString();
  const row = {
    lon: parseFloat(lonAndLat[0].toFixed(4)),
    lat: parseFloat(lonAndLat[1].toFixed(4)),
    date: dateFormat(new Date(utcDate), 'yyyy-MM-dd'),
    hour: dateFormat(new Date(utcDate), 'hh'),
    days: 2
  }
  const token = getStore({ name: "WeatherStore" });
  getMeteoByLonLat(token, row).then(({ data }) => {
    drawEatherDialog(map, coordinate, data.list[0].ytx)
  })
}
/**
* 获取转换后单位的距离
* @param {Number} radius 以米为单位的距离
* @returns {Number} circleRadius 以投影的单位为单位的距离
*/
const getRadius = (radius, map) => {
  let metersPerUnit = map.getView().getProjection().getMetersPerUnit();
  let circleRadius = radius / metersPerUnit
  return circleRadius;
}

/**
 * 绘制报警详情
 */
const AlarmInfoTips = (item, coordinate, map, id, className) => {
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", id)
  containerDom.setAttribute("class", className)
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "typhoon-info-content")
  // 节点
  const dom1 = document.createElement("div");
  dom1.setAttribute("class", "typhoon-info-item")
  dom1.innerHTML = "报警人：" + item.shipId;
  const dom2 = document.createElement("div");
  dom2.setAttribute("class", "typhoon-info-item")
  dom2.innerHTML = "经度：" + transfLonAndLat(item.lon, "lon", true);
  const dom3 = document.createElement("div");
  dom3.setAttribute("class", "typhoon-info-item")
  dom3.innerHTML = "纬度：" + transfLonAndLat(item.lat, "lat", true);
  const dom4 = document.createElement("div");
  dom4.setAttribute("class", "typhoon-info-item")
  dom4.innerHTML = "报警时间：" + item.caseTime;
  const dom5 = document.createElement("div");
  dom5.setAttribute("class", "typhoon-info-item")
  dom5.innerHTML = "备注：" + item.dest;
  const dom6 = document.createElement("div");
  dom6.setAttribute("class", "typhoon-info-item")
  dom6.innerHTML = "报警状态：" + (item.delFlag === "0" ? "进行中" : "关闭");
  // 插入
  containerDom.appendChild(contentDom);
  contentDom.appendChild(dom1);
  contentDom.appendChild(dom2);
  contentDom.appendChild(dom3);
  contentDom.appendChild(dom4);
  contentDom.appendChild(dom6);
  contentDom.appendChild(dom5);
  let typhoon_info_tips = new Overlay({
    element: containerDom,
    offset: [10, 10],
    positioning: 'center',
    insertFirst: false
  });
  typhoon_info_tips.setPosition(coordinate);
  map.addOverlay(typhoon_info_tips);
}

// 绘制雷达
const radarInfoTips = (item, coordinate, map, id) => {
  const options = [
    {
      label: "经度",
      prop: "lon",
      format: (row) => {
        return transfLonAndLat(row.lon, "lon", true)
      }
    },
    {
      label: "纬度",
      prop: "lat",
      format: (row) => {
        return transfLonAndLat(row.lat, "lat", true)
      }
    },
    {
      label: "覆盖半径",
      prop: "minLength",
      format: (row) => {
        return row.minLength + "海里"
      }
    },
    {
      label: "真实覆盖",
      prop: "maxLength",
      format: (row) => {
        return row.maxLength + "海里"
      }
    },
    {
      label: "基站高度",
      prop: "height",
      format: (row) => {
        return row.height + "米"
      }
    },
  ]
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", id)
  const headDom = document.createElement("div");
  headDom.setAttribute("class", "typhoon-info-head")
  const titleDom = document.createElement("div");
  titleDom.setAttribute("class", "typhoon-info-title")
  titleDom.innerHTML = item.name;
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "typhoon-info-content")
  // 插入基础节点
  containerDom.appendChild(headDom);
  containerDom.appendChild(contentDom);
  headDom.appendChild(titleDom);
  // 插入普通节点
  for (let t of options) {
    const lonDom = document.createElement("div");
    lonDom.setAttribute("class", "typhoon-info-item")
    lonDom.innerHTML = t.label + "：" + t.format(item);
    // 插入
    contentDom.appendChild(lonDom);
  }
  let typhoon_info_tips = new Overlay({
    element: containerDom,
    offset: [10, 10],
    positioning: 'center',
    insertFirst: false
  });
  typhoon_info_tips.setPosition(coordinate);
  map.addOverlay(typhoon_info_tips);
}
// 绘制船舶
const shipInfoTips = (item, coordinate, map, id) => {
  const options = [
    {
      label: "目标编号",
      prop: "lon",
      format: (row) => {
        console.log("row: ", row)
        return "目标编号: " + row.targetNum
      }
    },
    {
      label: "",
      prop: "lat",
      format: (row) => {
        return dateFormat(parseInt(row.time) * 1000)
      }
    },
  ]
  const containerDom = document.createElement('div');
  containerDom.setAttribute("id", id)
  const contentDom = document.createElement("div");
  contentDom.setAttribute("class", "typhoon-info-content")
  // 插入基础节点
  containerDom.appendChild(contentDom);
  // 插入普通节点
  for (let t of options) {
    const lonDom = document.createElement("div");
    lonDom.setAttribute("class", "typhoon-info-item")
    lonDom.innerHTML = t.format(item);
    // 插入
    contentDom.appendChild(lonDom);
  }
  let typhoon_info_tips = new Overlay({
    element: containerDom,
    offset: [10, 10],
    positioning: 'center',
    insertFirst: false
  });
  typhoon_info_tips.setPosition(coordinate);
  map.addOverlay(typhoon_info_tips);
}

export {
  radarInfoTips,
  pointLonToXy,
  pointLonLat,
  transformToMe,
  transformLineForPoint,
  getLonAndLat,
  CalculateContour,
  CalculateSelect,
  removeDomByClassName,
  transformNowToLonlat,
  transformLonlatToNow,
  CalculationAngle,
  moveToCenterByLonAndLat,
  getCenterPoint,
  removeDomById,
  shareInfoTips,
  typhoonInfoTips,
  drawWeatherInfo,
  getRadius,
  noticeInfoTips,
  AlarmInfoTips,
  shipInfoTips
}
